<template>
  <div class="course-chapters-container">
    <el-card>
      <template #header>
        <div class="header">
          <h2>{{ courseTitle || '课程章节' }}</h2>
          <el-button type="primary" @click="openAddDialog" style="float:right;">添加章节</el-button>
        </div>
      </template>
      <el-collapse v-model="activeChapters">
        <el-collapse-item
          v-for="(chapter, cIdx) in chapters"
          :key="chapter.chapterId"
        >
          <template #title>
            <div class="chapter-title">
              <span>第{{ cIdx + 1 }}章 {{ chapter.chapterName }}</span>
              <el-button 
                type="danger" 
                size="small" 
                @click.stop="handleDeleteChapter(chapter)"
                class="delete-chapter-btn">
                删除章节
              </el-button>
            </div>
          </template>
          <div class="chapter-description" v-if="chapter.chapterDescription">{{ chapter.chapterDescription }}</div>
          <div class="chapter-actions">
            <el-button type="primary" size="small" @click="openAddVideoDialog(chapter)">添加视频</el-button>
            <el-button type="success" size="small" @click="openAddChapterAtPosition(cIdx + 1)">在此后添加章节</el-button>
          </div>
          <div v-if="chapter.videos && chapter.videos.length">
            <ul class="video-list">
              <li v-for="(video, vIdx) in chapter.videos" :key="video.videoId">
                <span class="video-index">{{ cIdx + 1 }}-{{ vIdx + 1 }}</span>
                <span class="video-name">{{ video.videoName }}</span>
                <div class="video-actions">
                  <el-button
                    v-if="video.videoUrl"
                    type="primary"
                    size="small"
                    @click="playVideo(video)"
                  >播放</el-button>
                  <el-button
                    type="warning"
                    size="small"
                    @click="openUpdateVideoDialog(chapter, video)"
                  >更新</el-button>
                  <el-button
                    type="danger"
                    size="small"
                    @click="handleDeleteVideo(video)"
                  >删除</el-button>
                </div>
              </li>
            </ul>
          </div>
          <div v-else style="color:#bbb;">暂无视频</div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <!-- 添加章节弹窗 -->
    <el-dialog v-model="addDialogVisible" :title="isPositionSpecified ? `添加章节（在第${insertPosition}章之后）` : '添加章节'" width="700px">
      <el-form :model="addChaptersForm" ref="addChaptersFormRef">
        <div v-if="!isPositionSpecified" class="position-selector">
          <el-form-item label="添加位置" required>
            <el-radio-group v-model="addPosition">
              <el-radio :label="'beginning'">开头添加</el-radio>
              <el-radio :label="'end'">末尾添加</el-radio>
              <el-radio :label="'specific'">指定位置</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item v-if="addPosition === 'specific'" label="在第几章后">
            <el-input-number v-model="insertPosition" :min="1" :max="chapters.length" />
          </el-form-item>
        </div>
        
        <el-form-item
          v-for="(item, idx) in addChaptersForm.chapters"
          :key="idx"
          :label="'章节' + (idx + 1)"
          :prop="'chapters.' + idx + '.chapterName'"
          :rules="[{ required: true, message: '请输入章节名称', trigger: 'blur' }]"
        >
          <div style="display: flex; align-items: flex-start; gap: 10px; width: 100%;">
            <el-input v-model="item.chapterName" placeholder="章节名称" style="width: 180px;" />
            <el-input v-model.number="item.chapterOrder" type="number" min="1" placeholder="顺序" style="width: 80px;" />
            <el-button type="danger" :icon="Delete" @click="removeChapter(idx)" v-if="addChaptersForm.chapters.length > 1" circle />
            <el-button type="primary" @click="addVideoRow(idx)" style="margin-left: 10px;">添加视频</el-button>
          </div>
          <div style="margin-top: 10px;">
            <el-input v-model="item.chapterDescription" placeholder="章节描述（选填）" type="textarea" :rows="2" />
          </div>
          <div v-for="(video, vIdx) in item.videos" :key="vIdx" style="margin-left: 40px; margin-top: 8px; display: flex; align-items: center; gap: 8px;">
            <el-input v-model="video.videoName" placeholder="视频名称" style="width: 180px;" />
            <el-upload
              :http-request="(option) => handleVideoUpload(option, idx, vIdx)"
              :show-file-list="false"
              :before-upload="beforeVideoUpload"
              accept="video/*,.mp4,.avi,.mov,.wmv,.flv"
            >
              <el-button type="primary" size="small">上传视频</el-button>
            </el-upload>
            <span v-if="video.videoUrl" style="color: #67c23a;">已上传</span>
            <el-button type="danger" :icon="Delete" @click="removeVideo(idx, vIdx)" circle />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addChapterRow">添加一行</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddChapters">确定</el-button>
      </template>
    </el-dialog>
    
    <!-- 视频对话框（添加/更新共用） -->
    <el-dialog 
      v-model="addVideoDialogVisible" 
      :title="isUpdateMode ? '更新视频' : '添加视频'" 
      width="550px">
      <el-form :model="videoForm" ref="videoFormRef" label-width="100px" :rules="videoRules">
        <el-form-item label="所属章节" prop="chapterId">
          <el-input v-model="videoForm.chapterName" disabled />
        </el-form-item>
        <el-form-item label="视频名称" prop="videoName">
          <el-input v-model="videoForm.videoName" placeholder="请输入视频名称" />
        </el-form-item>
        <el-form-item label="视频顺序" prop="videoOrder">
          <el-input-number v-model="videoForm.videoOrder" :min="1" />
        </el-form-item>
        <el-form-item label="视频文件" prop="videoUrl">
          <div class="upload-container">
            <el-upload
              :http-request="handleSingleVideoUpload"
              :show-file-list="false"
              :before-upload="beforeVideoUpload"
              accept="video/*,.mp4,.avi,.mov,.wmv,.flv"
            >
              <el-button type="primary">选择视频文件</el-button>
            </el-upload>
            <div v-if="videoForm.videoUrl" class="upload-info">
              <el-icon class="success-icon"><Check /></el-icon>
              <span>已上传视频</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="视频链接" prop="videoUrl">
          <el-input v-model="videoForm.videoUrl" placeholder="也可以直接输入视频链接" />
          <div class="form-tip">支持直接输入视频URL或上传视频文件</div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addVideoDialogVisible = false">取消</el-button>
        <el-button 
          type="primary" 
          @click="isUpdateMode ? submitUpdateVideo() : submitAddVideo()" 
          :loading="submitVideoLoading">
          {{ isUpdateMode ? '更新' : '确定' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCourseDetailed, addChapters, addVideo, uploadVideoFile, deleteVideo, deleteChapter, updateVideo } from '@/api/course'
import { ElMessage, ElMessageBox } from 'element-plus'
import { uploadFile } from '@/api/common'
import { Delete, Check } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const courseId = route.params.id
const chapters = ref([])
const courseTitle = ref('')
const activeChapters = ref([])
const addDialogVisible = ref(false)
const addChaptersForm = reactive({ chapters: [{ chapterName: '', chapterOrder: 1, chapterDescription: '', videos: [] }] })
const addChaptersFormRef = ref(null)

// 添加位置选择
const addPosition = ref('end')
const insertPosition = ref(1)
const isPositionSpecified = ref(false)

// 添加视频相关变量
const addVideoDialogVisible = ref(false)
const submitVideoLoading = ref(false)
const isUpdateMode = ref(false)
const videoForm = reactive({
  videoId: 0,
  chapterId: 0,
  courseId: 0,
  chapterName: '',
  videoName: '',
  videoUrl: '',
  videoOrder: 1
})
const videoFormRef = ref(null)
const videoRules = {
  videoName: [
    { required: true, message: '请输入视频名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  videoUrl: [
    { required: true, message: '请上传视频或输入视频链接', trigger: 'blur' }
  ]
}

// 获取课程详细信息（课程名和章节）
const fetchCourseDetailed = async () => {
  const res = await getCourseDetailed(courseId)
  if (res.code === 0 || res.code === 200) {
    courseTitle.value = res.data.courseName
    chapters.value = (res.data.chapters || []).sort((a, b) => a.chapterOrder - b.chapterOrder)
    activeChapters.value = chapters.value.map(c => c.chapterId)
  }
}

const formatDuration = (seconds) => {
  if (!seconds) return ''
  const min = Math.floor(seconds / 60)
  const sec = seconds % 60
  return `${min}分${sec}秒`
}

const openAddDialog = () => {
  addDialogVisible.value = true
  isPositionSpecified.value = false
  addPosition.value = 'end'
  
  const startOrder = chapters.value.length > 0 
    ? chapters.value[chapters.value.length - 1].chapterOrder + 1 
    : 1
    
  addChaptersForm.chapters = [{ chapterName: '', chapterOrder: startOrder, chapterDescription: '', videos: [] }]
}

// 在指定位置添加章节
const openAddChapterAtPosition = (position) => {
  addDialogVisible.value = true
  isPositionSpecified.value = true
  insertPosition.value = position
  
  const targetOrder = position < chapters.value.length 
    ? (chapters.value[position-1].chapterOrder + chapters.value[position].chapterOrder) / 2
    : chapters.value[position-1].chapterOrder + 1
    
  addChaptersForm.chapters = [{ 
    chapterName: '', 
    chapterOrder: Math.floor(targetOrder), 
    chapterDescription: '',
    videos: [] 
  }]
}

const addChapterRow = () => {
  const lastOrder = addChaptersForm.chapters[addChaptersForm.chapters.length - 1].chapterOrder
  addChaptersForm.chapters.push({ 
    chapterName: '', 
    chapterOrder: lastOrder + 1, 
    chapterDescription: '',
    videos: [] 
  })
}

const removeChapter = (idx) => {
  addChaptersForm.chapters.splice(idx, 1)
}

const addVideoRow = (chapterIdx) => {
  addChaptersForm.chapters[chapterIdx].videos.push({ videoName: '', videoUrl: '' })
}

const removeVideo = (chapterIdx, videoIdx) => {
  addChaptersForm.chapters[chapterIdx].videos.splice(videoIdx, 1)
}

// 检查文件是否是视频文件
const isVideoFile = (file) => {
  // 检查mime类型
  if (file.type && file.type.startsWith('video/')) {
    return true;
  }
  
  // 检查文件扩展名
  const filename = file.name || '';
  const extension = filename.split('.').pop().toLowerCase();
  const videoExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm', 'mpg', 'mpeg', 'm4v', '3gp'];
  
  return videoExtensions.includes(extension);
};

const handleVideoUpload = async (option, chapterIdx, videoIdx) => {
  // 先验证文件类型
  const file = option.file;
  console.log('批量添加-文件信息:', {
    name: file.name,
    type: file.type,
    size: file.size,
    sizeInMB: file.size / 1024 / 1024
  });
  
  const isVideo = isVideoFile(file);
  const isLt500M = file.size / 1024 / 1024 < 500;

  if (!isVideo) {
    console.log('批量添加-文件类型验证失败:', file.type);
    ElMessage.error('只能上传视频文件!');
    option.onError('只能上传视频文件!');
    return;
  }
  if (!isLt500M) {
    console.log('批量添加-文件大小验证失败:', file.size / 1024 / 1024, 'MB');
    ElMessage.error('视频大小不能超过 500MB!');
    option.onError('视频大小不能超过 500MB!');
    return;
  }

  try {
    console.log('批量添加-开始上传视频文件...');
    // 使用专门的视频上传接口
    const res = await uploadVideoFile(option.file);
    console.log('批量添加-视频上传响应:', res);
    
    if (res.code === 0 || res.code === 200) {
      addChaptersForm.chapters[chapterIdx].videos[videoIdx].videoUrl = res.data;
      option.onSuccess(res, option.file);
    } else {
      console.error('批量添加-视频上传失败:', res);
      option.onError(res.message || '上传失败');
    }
  } catch (err) {
    console.error('批量添加-视频上传错误:', err);
    option.onError(err);
  }
}

const submitAddChapters = async () => {
  if (!addChaptersForm.chapters.length) return

  // 表单验证
  try {
    if (addChaptersFormRef.value) {
      await addChaptersFormRef.value.validate()
    }
    
    if (!isPositionSpecified.value && addPosition.value !== 'end') {
      if (addPosition.value === 'beginning') {
        const minOrder = chapters.value.length > 0 
          ? Math.min(...chapters.value.map(c => c.chapterOrder)) - 1 
          : 1
        
        addChaptersForm.chapters.forEach((c, idx) => {
          c.chapterOrder = minOrder + idx
        })
      } else if (addPosition.value === 'specific' && insertPosition.value > 0) {
        if (insertPosition.value <= chapters.value.length) {
          const prevOrder = chapters.value[insertPosition.value - 1].chapterOrder
          const nextOrder = insertPosition.value < chapters.value.length 
            ? chapters.value[insertPosition.value].chapterOrder 
            : prevOrder + addChaptersForm.chapters.length + 1
            
          const step = (nextOrder - prevOrder) / (addChaptersForm.chapters.length + 1)
          
          addChaptersForm.chapters.forEach((c, idx) => {
            c.chapterOrder = Math.floor(prevOrder + step * (idx + 1))
          })
        }
      }
    }
    
    // 验证章节名称是否为空
    const invalidChapters = addChaptersForm.chapters.filter(c => !c.chapterName || c.chapterName.trim() === '')
    if (invalidChapters.length > 0) {
      ElMessage.warning('请填写所有章节名称')
      return
    }
    
    // 保存原始章节数据，包含视频信息
    const originalChapters = JSON.parse(JSON.stringify(addChaptersForm.chapters))
    
    // 严格按照API文档准备数据，只包含必要字段：chapterId, chapterName, chapterOrder
    const chaptersToSubmit = addChaptersForm.chapters.map(chapter => ({
      chapterId: chapter.chapterId || 0,
      chapterName: chapter.chapterName || '',
      chapterOrder: chapter.chapterOrder || 1
    }))
    
    // 打印日志，方便调试
    console.log('提交章节数据:', JSON.stringify(chaptersToSubmit))
    console.log('请求URL:', `/course/chapter/addChapters/${courseId}`)
    
    try {
      const res = await addChapters(courseId, chaptersToSubmit)
      console.log('添加章节响应:', res)
      
      if (res.code === 0 || res.code === 200) {
        ElMessage.success('章节添加成功')
        
        // 获取更新后的章节数据
        await fetchCourseDetailed()
        
        // 检查是否有视频需要添加
        const hasVideos = originalChapters.some(chapter => chapter.videos && chapter.videos.length > 0)
        
        if (hasVideos) {
          ElMessage.info('正在处理视频，请稍候...')
          
          // 添加视频
          const newChapters = chapters.value
          let videoPromises = []
          let addedVideosCount = 0
          
          // 遍历原始章节和视频
          for (let i = 0; i < originalChapters.length; i++) {
            const originalChapter = originalChapters[i]
            if (!originalChapter.videos || originalChapter.videos.length === 0) continue
            
            // 通过顺序和名称查找对应的新章节ID
            const matchingNewChapter = newChapters.find(c => 
              c.chapterName === originalChapter.chapterName && 
              Math.abs(c.chapterOrder - originalChapter.chapterOrder) < 0.1
            )
            
            if (!matchingNewChapter) continue
            
            // 为每个视频创建添加请求
            for (const video of originalChapter.videos) {
              if (!video.videoName || !video.videoUrl) continue
              
              const videoDTO = {
                videoId: 0,
                chapterId: matchingNewChapter.chapterId,
                courseId: parseInt(courseId),
                videoName: video.videoName,
                videoUrl: video.videoUrl,
                videoOrder: 1 // 默认顺序
              }
              
              videoPromises.push(addVideo(videoDTO))
              addedVideosCount++
            }
          }
          
          // 处理所有视频添加请求
          if (videoPromises.length > 0) {
            try {
              await Promise.all(videoPromises)
              ElMessage.success(`成功添加 ${addedVideosCount} 个视频`)
              await fetchCourseDetailed() // 再次刷新数据
            } catch (videoErr) {
              console.error('添加视频失败:', videoErr)
              ElMessage.error('部分视频添加失败')
            }
          }
        }
        
        addDialogVisible.value = false
      } else {
        ElMessage.error(res.message || '添加失败')
      }
    } catch (apiError) {
      console.error('API调用错误:', apiError)
      console.error('错误详细信息:', apiError.response?.data || apiError.message)
      ElMessage.error(`添加失败: ${apiError.response?.data?.message || apiError.message || '未知错误'}`)
    }
  } catch (e) {
    console.error('添加章节失败:', e)
    ElMessage.error('添加失败: ' + (e.message || '未知错误'))
  }
}

// 添加视频相关方法
const openAddVideoDialog = (chapter) => {
  isUpdateMode.value = false
  Object.assign(videoForm, {
    videoId: 0,
    chapterId: chapter.chapterId,
    courseId: parseInt(courseId),
    chapterName: chapter.chapterName,
    videoName: '',
    videoUrl: '',
    videoOrder: 1
  })
  
  addVideoDialogVisible.value = true
}

// 打开更新视频对话框
const openUpdateVideoDialog = (chapter, video) => {
  isUpdateMode.value = true
  Object.assign(videoForm, {
    videoId: video.videoId,
    chapterId: video.chapterId || chapter.chapterId,
    courseId: parseInt(courseId),
    chapterName: chapter.chapterName,
    videoName: video.videoName,
    videoUrl: video.videoUrl,
    videoOrder: video.videoOrder
  })
  
  addVideoDialogVisible.value = true
}

const beforeVideoUpload = (file) => {
  const isVideo = isVideoFile(file);
  const isLt500M = file.size / 1024 / 1024 < 500;

  if (!isVideo) {
    ElMessage.error('只能上传视频文件!');
    return false;
  }
  if (!isLt500M) {
    ElMessage.error('视频大小不能超过 500MB!');
    return false;
  }
  return true;
}

const handleSingleVideoUpload = async (option) => {
  // 先验证文件类型
  const file = option.file;
  console.log('文件信息:', {
    name: file.name,
    type: file.type,
    size: file.size,
    sizeInMB: file.size / 1024 / 1024
  });
  
  const isVideo = isVideoFile(file);
  const isLt500M = file.size / 1024 / 1024 < 500;

  if (!isVideo) {
    console.log('文件类型验证失败:', file.type);
    ElMessage.error('只能上传视频文件!');
    option.onError('只能上传视频文件!');
    return;
  }
  if (!isLt500M) {
    console.log('文件大小验证失败:', file.size / 1024 / 1024, 'MB');
    ElMessage.error('视频大小不能超过 500MB!');
    option.onError('视频大小不能超过 500MB!');
    return;
  }

  try {
    console.log('开始上传视频文件...');
    // 使用专门的视频上传接口
    const res = await uploadVideoFile(option.file);
    console.log('视频上传响应:', res);
    
    if (res.code === 0 || res.code === 200) {
      videoForm.videoUrl = res.data;
      ElMessage.success('视频上传成功');
      option.onSuccess(res, option.file);
    } else {
      console.error('视频上传失败:', res);
      ElMessage.error(res.message || '上传失败');
      option.onError(res.message || '上传失败');
    }
  } catch (err) {
    console.error('视频上传错误:', err);
    ElMessage.error(`上传失败: ${err.message || err}`);
    option.onError(err);
  }
}

const submitAddVideo = async () => {
  if (!videoFormRef.value) return
  
  await videoFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        submitVideoLoading.value = true
        
        const videoDTO = {
          videoId: videoForm.videoId,
          chapterId: videoForm.chapterId,
          courseId: videoForm.courseId,
          videoName: videoForm.videoName,
          videoUrl: videoForm.videoUrl,
          videoOrder: videoForm.videoOrder
        }
        
        const res = await addVideo(videoDTO)
        
        if (res.code === 0 || res.code === 200) {
          ElMessage.success('视频添加成功')
          addVideoDialogVisible.value = false
          fetchCourseDetailed()
        } else {
          ElMessage.error(res.message || '添加失败')
        }
      } catch (e) {
        console.error(e)
        ElMessage.error('添加视频失败，请重试')
      } finally {
        submitVideoLoading.value = false
      }
    }
  })
}

// 更新视频
const submitUpdateVideo = async () => {
  if (!videoFormRef.value) return
  
  await videoFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        submitVideoLoading.value = true
        
        const videoDTO = {
          videoId: videoForm.videoId,
          chapterId: videoForm.chapterId,
          courseId: videoForm.courseId,
          videoName: videoForm.videoName,
          videoUrl: videoForm.videoUrl,
          videoOrder: videoForm.videoOrder
        }
        
        const res = await updateVideo(videoDTO)
        
        if (res.code === 0 || res.code === 200) {
          ElMessage.success('视频更新成功')
          addVideoDialogVisible.value = false
          fetchCourseDetailed()
        } else {
          ElMessage.error(res.message || '更新失败')
        }
      } catch (e) {
        console.error(e)
        ElMessage.error('更新视频失败，请重试')
      } finally {
        submitVideoLoading.value = false
      }
    }
  })
}

function playVideo(video) {
  router.push({
    name: 'video-study',
    params: { id: courseId },
    query: { videoId: video.videoId }
  })
}

// 删除视频
const handleDeleteVideo = (video) => {
  ElMessageBox.confirm(
    `确定要删除视频"${video.videoName}"吗？`, 
    '删除确认', 
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      const res = await deleteVideo(video.videoId)
      if (res.code === 0 || res.code === 200) {
        ElMessage.success('删除成功')
        // 重新获取数据以更新UI
        fetchCourseDetailed()
      } else {
        ElMessage.error(res.message || '删除失败')
      }
    } catch (error) {
      console.error('删除视频失败:', error)
      ElMessage.error('删除失败，请重试')
    }
  }).catch(() => {
    // 取消删除，不做处理
  })
}

// 删除章节
const handleDeleteChapter = (chapter) => {
  ElMessageBox.confirm(
    `确定要删除章节"${chapter.chapterName}"吗？\n该操作将同时删除章节下的所有视频，且不可恢复。`, 
    '删除确认', 
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      dangerouslyUseHTMLString: true
    }
  ).then(async () => {
    try {
      const res = await deleteChapter(chapter.chapterId)
      if (res.code === 0 || res.code === 200) {
        ElMessage.success('删除成功')
        // 重新获取数据以更新UI
        fetchCourseDetailed()
      } else {
        ElMessage.error(res.message || '删除失败')
      }
    } catch (error) {
      console.error('删除章节失败:', error)
      ElMessage.error('删除失败，请重试')
    }
  }).catch(() => {
    // 取消删除，不做处理
  })
}

onMounted(() => {
  fetchCourseDetailed()
})
</script>

<style scoped>
.course-chapters-container {
  max-width: 900px;
  margin: 30px auto;
  padding: 20px;
}
.header {
  display: flex;
  align-items: center;
  gap: 20px;
}
.chapter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.delete-chapter-btn {
  margin-right: 20px;
}
.chapter-description {
  margin-bottom: 10px;
  color: #666;
  line-height: 1.5;
  font-size: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #eaeaea;
}
.chapter-actions {
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
}
.video-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.video-list li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  font-size: 16px;
  gap: 12px;
}
.video-index {
  color: #00eaff;
  font-weight: 500;
  margin-right: 8px;
}
.video-name {
  flex: 1;
}
.video-actions {
  display: flex;
  gap: 8px;
}
.upload-container {
  display: flex;
  align-items: center;
  gap: 15px;
}
.upload-info {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #67c23a;
}
.success-icon {
  color: #67c23a;
}
.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
.position-selector {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #ebeef5;
}
</style> 